<template>
  <div id="app" class="containerApp">
    <router-view></router-view>
  </div>
</template>
<script>
// import {debounce} from "lodash";
import {getComputedStyle,debounce} from "@/utils";
export default {
  name: 'App',
  data() {
    return {
      scaleX: 1,
      scaleY: 1,
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    transformStyle: function () {
      return {
        transform: `scaleX(${this.scaleX}) scaleY(${this.scaleY}) translateX(-50%) translateY(-50%)`
      };
    }
  },
  methods:{
      init() {
        this.listenResize();
      },
      initData() {
        this.scaleX = 1;
        this.scaleY = 1;
      },
      initScale() {
        let $container = document.querySelector('.containerApp');
        let containerWidth = getComputedStyle($container, 'width').replace("px", "");
        let containerHeight = getComputedStyle($container, 'height').replace("px", "");
        containerWidth = Number(containerWidth);
        containerHeight = Number(containerHeight);
        containerWidth = isNaN(containerWidth) ? 0 : containerWidth;
        containerHeight = isNaN(containerHeight) ? 0 : containerHeight;
      
        let defaultHeight = 1080;
        let defaultWidth = 1920;
        // sacle 缩放比例。
        let scaleX = 1;
        let scaleY = 1;
        //
        scaleX = containerWidth / defaultWidth;
        scaleY = containerHeight / defaultHeight;
      
        this.scaleX = scaleX;
        this.scaleY = scaleY;
      },
      listenResize() {
        this.initScale();
        window.addEventListener('resize', debounce(() => {
          this.initScale();
        },300));
      }
  }
}
</script>

<style lang="scss">
#app {
  height: 100%;
  width: 100%;
  position: relative;
}
</style>
